import React from 'react';

const recentContacts = [
  { id: '1', name: '古龙', phone: '+86 153XXXXXXXX' },
  { id: '2', name: '金庸', phone: '+86 131XXXXXXXX' },
  { id: '3', name: '梁羽生', phone: '+86 178XXXXXXXX' },
];

const RecentContacts: React.FC = () => {
  return (
    <div className="px-4 py-2">
      <div className="space-y-2">
        {recentContacts.map(contact => (
          <div
            key={contact.id}
            className="flex items-center bg-white rounded-2xl px-4 py-3 shadow-sm border border-gray-100/80 hover:border-gray-200/80 transition-all"
          >
            <div className="flex-1 flex items-center min-w-0">
              <div className="text-gray-800 text-sm font-medium truncate">
                {contact.name}
              </div>
              <div className="mx-3 w-px h-4 bg-gray-200/80"></div>
              <div className="text-gray-600 text-sm whitespace-nowrap">
                {contact.phone}
              </div>
            </div>
            <button className="ml-4 px-3.5 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-full hover:bg-blue-100 transition-colors border border-blue-100/50">
              收藏
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecentContacts;